
<template>
  <!-- 这边显示 还是和上面耦合的啊 -->
  <div class="dtInfosWrap " :class="{'hidden':placeData.hover==false}" :key="placeData.id">
    <ul class="gwyxx" v-for="(info) in placeData.infos" :key="'info_'+info.id">
      <!-- @mouseover="selectStyle (info,'hover') " :class="{'bg-yellow':info.hover}" @mouseout="outStyle(info,'hover')" -->
      <li :key="placeData.id">
        <a :href="info.herf" target="_blank" class="clearfix" :title="info.title" :tabindex="info.tabindex" style="display: block;">
          <em></em>
          <span class="Title text-tag" tabindex="-1">{{info.text}}</span>
          <span class="Days text-tag" tabindex="-1">{{info.date}}</span></a>

      </li>
    </ul>
  </div>
</template>

        
<style>
@import "../../css/zj_index.css";
@import "../../css/zj_index2.css";

.bg-yellow {
  background: yellow;
}
</style>


<script>
// 引入axios HTTP module to submit login form
// import {
//   isNull,
//   axiosRequest,
//   storageOperation
// } from '@/common/common'
// import {
//   commonConfig
// } from '@/config/commonConfig';

// import HoverShow from '@/components/HoverShow/HoverShow';

// 这样不能引入 组件
//  import {
//   HoverShow
// } from '@/HoverShow/HoverShow';

// 需要引入， 不引入好像也没事？
// 并不是 是需要引入的  之前是没刷新
// import data from '@/util/mock.js';
// 可以  但是这个data 是什么
// 是一整个mock 对象  其实叫做 Mock 更好吧
// 因为那边 export 了
// import Mock from '@/util/mock.js';
// console.log("data");
// console.log(data);

// require('@/util/mock.js');
// require 可以
// 这是正常的

// import data from 'src/util/mock.js';
// 从src 就错了
export default {
  // 一个 warp 底下一个列表
  name: "DataInfosWrap",
  // name: 'hover-show',
  // 这name 是不是没关系的啊
  // js hover

  // props: {
  //   // infos: Array,
  //   place: Object,
  //   // selectValue: Object
  // },

  // props:["place"],
  mounted() {
    console.log("this.place");
    console.log(this.place);
    this.placeData = this.place;
  },
  data() {
    // 这里的数据删掉 就可以正常的用父组件的 数据了
    // mock js

    // ————————————————
    // 版权声明：本文为CSDN博主「sunshine_ping」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
    // 原文链接：https://blog.csdn.net/sunshine_ping/article/details/80269707

    var placeDataFake = {
      id: 1,
      select: "第一行",
      icon: 1,
      url: "http://www.gov.cn/pushinfo/v150203/index.htm",
      name: "国务院",
      tabindex: 68,
      infos: [
        {
          // 字符串带着 .. 就报错  vue
          id: 1,
          href: "http://www.gov.cn/premier/2021-08/25/content_5633325.htm",
          title:
            "李克强主持召开国务院常务会议 部署全面推动长江经济带...2021-08-25",
          // tabindex="74",
          // 错误 在这里写了等于号
          tabindex: "74",
          text: "李克强主持召开国务院常务会议 部署全面推动长江经济带...",
          date: "2021-08-25"
        }
      ]
    };

    return {
      placeData: null
    };
  },
  // 上面也写了 props 然后就一直没发现下面写了,然后类型不匹配..
  props: {
    // Array
    place: Object
  },

  methods: {
    windowOpen(url) {
      window.open(url);
    },
    selectStyle(item) {
      // console.log("selectStyle");

      var _this = this;
      // console.log("_this")
      // console.log(_this)
      // _this 是被选中的
      // 防止没有渲染出来吗
      this.$nextTick(function() {
        // console.log("this");
        // console.log(this);
        this.items.forEach(function(eachItem) {
          // console.log("_this in");
          // console.log(_this);
          // this.$set(item,'active',false);
          // 这样会没有
          _this.$set(eachItem, "hover", false);
          // console.log("this in");
          // console.log(this);
        });
        // this 代表vue
        this.$set(item, "hover", true);
      });
    },

    selectStyle(item, attrName) {
      // console.log("selectStyle");

// 或者还是不要 nextTick 了 
// 但是不是这边的问题啊
      var _this = this;
      
      // console.log("_this")
      // console.log(_this)
      // _this 是被选中的
      // 防止没有渲染出来吗
      this.$nextTick(function() {
        // console.log("this");
        // console.log(this);
        this.items.forEach(function(eachItem) {
          // console.log("_this in");
          // console.log(_this);
          // this.$set(item,'active',false);
          // 这样会没有
          _this.$set(eachItem, attrName, false);
          // console.log("this in");
          // console.log(this);
        });
        // this 代表vue
        this.$set(item, attrName, true);
      });



      //    var _this = this;
      
      // // console.log("_this")
      // // console.log(_this)
      // // _this 是被选中的
      // // 防止没有渲染出来吗
    
      //   // console.log("this");
      //   // console.log(this);
      //   var cnt=0;

      //   this.items.forEach(function(eachItem) {
      //     // console.log("_this in");
      //     // console.log(_this);
      //     // this.$set(item,'active',false);
      //     // 这样会没有
      //     _this.$set(eachItem, attrName, false);
      //     // console.log("this in");
      //     // console.log(this);
      //     cnt++;
      //   });
      //   // this 代表vue
      //   this.$set(item, attrName, true);
      
    },

    outStyle(item) {
      // console.log("outStyle");
      this.$set(item, "hover", false);
    },

    outStyle(item, attrName) {
      // console.log("outStyle");
      // this.$set(item, attrName, false);
        

var cnt=0;
          // 不能不失去样式  但是文章要不失去
      // var allFalse = true;
      this.items.forEach(function(eachItem) {
        // _this.$set(eachItem, "hover", false);
        if (eachItem.hover === true) {
          cnt++;
          // allFalse = false;
        }
      });
      // 如果只有他一个 就不要消失
      if(cnt>1){
         this.$set(item, attrName, false);
      }
      // if (allFalse) {
      //   this.$set(item, attrName, true);
      // }


    }
  }
  //  components: {
  //   HoverShow
  // }
};
</script>
